<!--
 * @Author: 陆成杰
 * @Date: 2022-06-24 15:39:15
 * @LastEditTime: 2022-06-27 16:22:50
 * @LastEditors: 陆成杰
 * @FilePath: /boe/src/views/home/home-children/Record.vue
 * Copyright (c) ${now_year} by zucc-陆成杰, All Rights Reserved. 
-->
<template>
  <div>
    <el-scrollbar height="250px">
      <div v-for="(item, index) in state.Record" :key="index" class="record">
        <div class="date">{{ getTime(item.Time) }}</div>
        <div class="msg">[{{ item.ObjectType }}]{{ item.Content }}</div>
        <div class="cut-line"></div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, computed } from "vue";
import { getEvents } from "../../../axios/home";

import moment from "moment";

const state = reactive({
  Record: [],
});

onMounted(() => {
  Events();
});

const Events = () => {
  getEvents().then((res) => {
    console.log(res.data.events);
    state.Record = res.data.events;
    // console.log(moment(res.data.events[0].Time * 1000).format("YYYY-MM-DD HH:mm:ss"));
    
  });
};

const getTime = (time) => {
  // console.log(time);

  const finaltime = moment(time).format("YYYY-MM-DD HH:mm:ss");
  // console.log(finaltime);
  
  return finaltime;
  // return 1
};
</script>

<style lang="less" scoped>
.record {
  // width: 90%;
  // text-align: center;
  color: #fff;
  margin-left: 30px;
}
.date {
  color: rgb(108, 116, 129);
  font-size: 12px;
}
.msg {
  font-size: 14px;
  margin-top: 6px;
}
.cut-line {
  width: 92%;
  height: 1px;
  background-color: rgba(108, 116, 129, 0.6);
  margin-top: 10px;
  margin-bottom: 20px;
}
</style>